<template>
  <div>
    <Header></Header>
    <div
      class="body"
      :style="{ 'padding-top': `${height + 1.76 * fontSize}px` }"
    >
      <van-tabs
        class="tabs"
        v-model:active="tab.index"
        :animated="true"
        :sticky="tab.sticky"
        :swipeable="true"
        :offset-top="`${height + 1.76 * fontSize}px`"
        :swipe-threshold="4"
      >
        <van-tab v-for="t in tabs" :key="t.id" :name="t.id" :title="t.name">
          <van-swipe
            class="swipe"
            :autoplay="3000"
            :lazy-render="true"
            v-if="t.id == 1"
          >
            <van-swipe-item v-for="s in 4" :key="s">
              <img :src="require(`./image/swipe${s}.jpeg`)" />
            </van-swipe-item>
          </van-swipe>
          <!-- 分类 -->
          <Classify v-if="t.id != 1"></Classify>
          <!-- 秒杀 -->
          <Seckill :id="t.id"></Seckill>
          <!-- 精选好货 -->
          <selected-goods v-if="t.id == 1"></selected-goods>
          <!-- 每日上新 -->
          <daily-update v-if="t.id == 1"></daily-update>
          <!-- 为你优选 -->
          <Optimization></Optimization>
        </van-tab>
      </van-tabs>
      <div
        ref="sort"
        class="sort"
        :style="{ top: `${height + 1.76 * fontSize}px` }"
      >
        <i class="iconfont icon-fenlei1"></i>
        <span>分类</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getModule } from "../../utils";
const components = getModule(require.context("./components", true, /\.vue$/));

export default {
  components: { ...components },
  data() {
    return {
      tabs: [
        {
          id: 1,
          name: "首页",
        },
        {
          id: 2,
          name: "手机",
        },
        {
          id: 3,
          name: "美妆",
        },
        {
          id: 4,
          name: "食品",
        },
        {
          id: 5,
          name: "生鲜",
        },
        {
          id: 6,
          name: "个护清洁",
        },
        {
          id: 7,
          name: "腕表珠宝",
        },
        {
          id: 8,
          name: "电脑办公",
        },
      ],
      tab: {
        index: "",
        sticky: false,
      },
    };
  },
  computed: {
    ...mapState(["height", "fontSize"]),
  },
  watch: {
    "tab.index"() {
      if (this.tab.index != 1) {
        this.tab.sticky = true;
        this.$refs.sort.style.position = "fixed";
        this.$refs.sort.style["z-index"] = 100;
      } else {
        this.tab.sticky = false;
        this.$refs.sort.style.position = "absolute";
        this.$refs.sort.style["z-index"] = 1;
      }
    },
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.body {
  position: relative;

  .sort {
    position: absolute;
    right: 0;
    padding: 0 0.32rem;
    height: 1.44rem;
    font-size: 0.56rem;
    line-height: 0.56rem;
    .font_color(@text-color);
    .bg_color(rgba(255, 255, 255, 1));
    box-shadow: -0.2rem 0 0.2rem rgba(122, 122, 122, 0.15);
    .fa(center);

    > i {
      font-size: 0.56rem;
      line-height: 0.56rem;
    }

    > span {
      padding-left: 0.16rem;
    }
  }
}
</style>

<style lang="less">
.tabs {
  .van-tabs__wrap {
    height: 1.44rem;

    .van-tabs__nav--line {
      padding: 0 0.32rem 0.6rem;
      width: calc(100% - 2.96rem);

      .van-tab {
        padding: 0 0.48rem;
        font-size: 0.56rem;
        line-height: 0.56rem;
        .font_color(@text-color-grey);
      }

      .van-tab--active {
        .font_color(rgba(243, 89, 100, 1));
      }

      .van-tabs__line {
        bottom: 0.6rem;
        .size(1.6rem, 0.12rem);
        .font_color(rgba(243, 89, 100, 1));
        border-radius: 0.12rem;
      }
    }
  }
}

.swipe {
  margin: 0.6rem 0;

  .van-swipe-item {
    height: 6rem;
    .fj(center);

    > img {
      width: 13.8rem;
      height: 100%;
      border-radius: 0.4rem;
    }
  }

  .van-swipe__indicators {
    .van-swipe__indicator {
      .bg_color(@text-color-grey);
    }
    .van-swipe__indicator--active {
      .bg_color(rgba(243, 89, 100, 1));
    }
  }
}
</style>
